<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
		<div class="mb-2 logo">Vue+WebApi</div>
        <el-menu :default-openeds="['1', '2']" text-color="#FFF"
		active-text-color="#ffd04b" background-color="#303133" router default-active="/" >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>店铺管理
            </template>
            <el-menu-item-group>
              <el-menu-item index="/"><el-icon><HomeFilled /></el-icon>首页</el-menu-item>
			<el-menu-item index="/category"><el-icon><Operation /></el-icon>分类管理</el-menu-item>			  	  
			<el-menu-item index="/shop"><el-icon><ShoppingBag /></el-icon>商品管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Setting /></el-icon>系统设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1"><el-icon><Edit /></el-icon>修改密码</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="Logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <!-- <el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-scrollbar> -->

		<router-view></router-view>
		
      </el-main>
	<el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script  setup>
//import { ref } from 'vue'
// import {  Message, Setting } from '@element-plus/icons-vue'//Menu as IconMenu,没安装引入就能使用
// const item = {
//   date: '2016-05-02',
//   name: 'Tom',
//   address: 'No. 189, Grove St, Los Angeles',
// }
// const tableData = ref(Array.from({ length: 30 }).fill(item
import { useStore} from 'vuex'
import {useRouter} from 'vue-router'
const store=useStore()
const router=useRouter()
const Logout=()=>{
	store.dispatch("authModule/logout")//调用异步方法
	router.push("/login")
}
</script>

<style scoped>
.logo{
	height:50px;
	color:white;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
}
.layout-container-demo{
  height:100vh;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: white; /* var(--el-color-primary-light-7); */
  color: var(--el-text-color-primary);
  box-shadow: var(--el-box-shadow-light);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  /* background: var(--el-color-primary-light-8); */
  background: #303133;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
  box-shadow: var(--el-box-shadow-light);
  margin:10px 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.el-footer{
  box-shadow: var(--el-box-shadow-light);
}
</style>
